<template>
  <div class="named-server-manage w-full h-full">
    <div class="btns w-full">
      <a-button type="primary" @click="dialogVisible = true">添加</a-button>
    </div>
    <a-table
      style="height:calc(100% - 40px);overflow-y:auto;"
      bordered
      :rowKey="record => record.id"
      :columns="table.columns"
      :data-source="table.dataSource"
      :pagination="table.pagination"
    >
      <template slot="VIPChannel" slot-scope="text,record">
        <a-switch @click="switchChange(record,'VIP')" :checked="record.useVIPChannel" checked-children="是" un-checked-children="否" />
      </template>
      <template slot="TLS" slot-scope="text,record">
        <a-switch @click="switchChange(record,'TLS')" :checked="record.useTLS" checked-children="是" un-checked-children="否" />
      </template>
    </a-table>
    <a-modal
      title="添加服务器地址"
      :visible="dialogVisible"
      :mask="false"
      @ok="addressOk"
      @cancel="addressCancel"
      centered
    >
      <a-input v-model="addressInput" placeholder="请输入地址" width="300px"/>
    </a-modal>
  </div>
</template>

<script>
import orupService from '@/api/orupService'
import moment from 'moment'

const columns = [
  {
    title: '地址',
    align: 'center',
    dataIndex: 'address'
  },
  {
    title: '主节点',
    align: 'center',
    dataIndex: 'master',
    customRender: (text) => {
      return text ? '是' : '否'
    }
  },
  {
    title: 'VIPChannel',
    align: 'center',
    dataIndex: 'useVIPChannel',
    scopedSlots: { customRender: 'VIPChannel' }
  },
  {
    title: 'TLS',
    align: 'center',
    dataIndex: 'useTLS',
    scopedSlots: { customRender: 'TLS' }
  },
  {
    title: '创建时间',
    align: 'center',
    dataIndex: 'createTime',
    customRender: function (text, row, index) {
      return moment(text).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  {
    title: '更新时间',
    align: 'center',
    dataIndex: 'updateTime',
    customRender: function (text, row, index) {
      return moment(text).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'status'
  }
]

export default {
  name: 'NamedServerManage',

  data () {
    return {
      dialogVisible: false,
      addressInput: '',
      filter: {
        filterText: '',
        pageIndex: 1,
        pageSize: 10
      },
      table: {
        columns: columns,
        dataSource: [],
        pagination: {
          pageSize: 10,
          total: 0,
          current: 1,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100', '200', '500'],
          showTotal: (total) => `共${total}条数据`,
          onShowSizeChange: (current, pageSize) => {
            this.filter.pageIndex = 1
            this.filter.pageSize = pageSize
          },
          onChange: (current, pageSize) => {
            this.filter.pageIndex = current
            this.filter.pageSize = pageSize
            this.table.pagination.current = current
          }
        }
      }
    }
  },

  async mounted () {
    this.loadData()
  },

  methods: {
    moment,
    async loadData () {
      this.table.dataSource = await orupService.nameQuery()
    },
    addressOk () {
      this.dialogVisible = false
      orupService.nameAdd(this.addressInput).then(res => {
        if (res.id) {
          this.$message.success('添加成功!')
          this.loadData()
        }
      })
    },
    addressCancel () {
      this.dialogVisible = false
      this.addressInput = ''
    },
    switchChange (item, type) {
      var _this = this
      if (type === 'VIP') {
        const useVIPChannel = item.useVIPChannel !== true
        item.useVIPChannel = useVIPChannel
        const params = {
          nameServerId: item.id,
          useVIPChannel: item.useVIPChannel
        }
        orupService.updateUseVIPChannel(params).then(res => {
          if (res.id) {
            _this.$message.success('修改成功!')
            _this.loadData()
          }
        })
      } else if (type === 'TLS') {
        const useTLS = item.useTLS !== true
        item.useTLS = useTLS
        const params = {
          nameServerId: item.id,
          useTLS: item.useTLS
        }
        orupService.updateUseTLS(params).then(res => {
          if (res.id) {
            _this.$message.success('修改成功!')
            _this.loadData()
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.named-server-manage {
  background: #fff;
  padding: 10px;

  .btns {
    height: 40px;
  }
}

</style>
